<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--CSS-->
    <!--bootstrap V3-->
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrapValidator.css}">
    <!--JS-->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrapValidator.js}"></script>
</head>
<style>
    h1{
        padding-top: 30px;
        font-style: italic;
    }
    .container-style{
        background-color: #f9fbff;
        height: 720px;
    }
    .col-top{
        margin-top: 120px;
        border-radius: 8px;
        box-shadow: 0 6px 32px -7px rgba(29, 102, 189, .16);
        height: 400px;
        width: 750px;
        background-color: #fff;
    }
    .col-left{
        margin-left: 5px;
    }
    .form-select{
        width: 130px;
        padding: 6px 0px;
        text-align: center;
        display: inline-block;
        
    }
    .form-group-div{
        margin-top: 30px;
        height: 50px;
    }
    
    .model-style{
        width: 90%;
    }
    
    .frame-style{
        width:100%;
        height:580px;
    }
</style>
<body>
<div class="container-fluid container-style">
    <div class="row">
        <div class="col-lg-7 col-lg-offset-3 col-top">
            <h1 style="text-align: center">登录页面</h1>
            <!--登录表单-->
            <form id="loginForm" method="post" class="form-horizontal" action="">
                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">账号</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="account" id="account"/>
                    </div>
                </div>
                <div class="form-group form-group-div">
                    <label class="col-lg-4 control-label">密码</label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="password" id="password"/>
                    </div>
                </div>
                <div class="form-group form-group-div">
                    <div class="col-lg-10 col-lg-offset-4">
<!--                        <select class="form-control form-select" name="usertype">-->
<!--                            <option value="0">选择用户类型</option>-->
<!--                            <option value="1">管理员</option>-->
<!--                            <option value="2">经理</option>-->
<!--                            <option value="3">员工</option>-->
<!--                        </select>-->
                        <button type="button" class="btn btn-primary col-left" id="userlogin">登录</button>
                        <button type="button" class="btn btn-primary col-left" id="userregister" data-toggle="modal" data-target="#registerModel">注册</button>
                    </div>
                </div>
            </form>
            <div id="registerModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;">
                <div class="modal-dialog model-style" role="document">
                    <div class="modal-content">
                        <!--模态框的主体内容-->
                        <div class="modal-body" style="padding: 0px">
                            <iframe th:src="@{/user/toRegister}" class="frame-style"></iframe>
                        </div>
                        <!--模态框的尾部内容-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#loginForm').bootstrapValidator({
                message: '用户不存在，请重新登录',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    account: {
                        message: '账号不正确',
                        validators: {
                            notEmpty: {
                                message: '账号不能为空'
                            },
                            stringLength: {
                                min: 3,
                                max: 20,
                                message: '账号格式应该为3-20个字符'
                            },
                            regexp: {
                                regexp: /^[0-9|a-z|A-Z|\u4e00-\u9fa5]{3,20}$/,
                                message: '账号格式不正确',
                            },
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 20,
                                message: '密码格式应该为6-20个大小写字母或数字'
                            },
                            regexp: {
                                regexp: /^[0-9|a-z|A-Z]{6,20}$/,
                                message: '密码格式不正确'
                            },
                        }
                    },
                }
            }).on('success.form.bv',function(e) {
                //阻止表单提交
                e.preventDefault();
                // 得到表单对象
                var $form = $(e.target);
                // Get the BootstrapValidator instance
                var bv = $form.data('bootstrapValidator');
                // 使用ajax提交
                $.post($form.attr('action'),$form.serialize(),function(result) {
                    console.log(result);
                },'json');
            });
        
        $('#userlogin').on('click',function() {
            $.ajax({
                url: '/user/selectUserInfo',
                type: 'post',
                data: $('#loginForm').serialize(),
                success: function (data) {
                    if (data.list!=null){
                        alert('登录成功');
                        window.location.href = '/customer/toCrm';
                    }
                }
            })
        })
    });
    
    
</script>

</body>
</html>